<template>
	<view style="padding-bottom:20rpx">
		<view v-if="listData.length > 0">
			<view class="" v-for="(item,index) in listData" :key="index">
				<view class="bg_color">
					<view class="doctorInfo" v-if="item.type == 5"
						@click="goto(`/pages/homePage/doctorPage?id=${item.doctorId}`)">
						<view class="doctor_img">
							<image v-if="item.storeLogo" style="width: 155rpx;height: 160rpx;" :src="item.storeLogo">
							</image>
							<!-- <image v-else src="../../pagesSub/static/images/icon_head@2x.png"></image> -->
						</view>
						<view class="Infos" style="width: 72%;">
							<view class="Infos_one line1Overflow">
								<!-- <text style="font-size: 32rpx; font-weight: bold;">{{ item.name }}</text> -->
								<text
									style="font-size: 30rpx;font-weight: bold">{{item.storeName?item.storeName:''}}</text>
								<!-- <text style="padding: 0 8rpx;" v-if="item.jobTitle">|</text> -->
								<!-- <text>{{item.deptName}}</text> -->
							</view>
							<view class="Infos_one line1Overflow" style="margin-top: 5rpx;">
								<text>{{ item.doctorName?item.doctorName:''}}</text>
							</view>
							<view class="Infos_one line1Overflow" style="margin-top: 5rpx;">
								<text>{{ item.storeAddress?item.storeAddress:''}}</text>
							</view>
							<view class="Infos_one line1Overflow" style="margin-top: 5rpx;">
								<text>{{ item.storePhone?item.storePhone:''}}</text>
							</view>
						</view>
					</view>
					<view class="doctorInfo" v-else>
						<view class="doctor_img">
							<image v-if="item.icon" :src="item.icon"></image>
						</view>
						<view class="Infos" style="width: 78%;">
							<view class="Infos_one line1Overflow">
								<text style="font-size: 32rpx; font-weight: bold;">{{ item.name }}</text>
								<text
									style="padding-left: 20rpx;font-size: 29rpx;">{{item.jobTitle?item.jobTitle:''}}</text>
								<text style="padding: 0 8rpx;" v-if="item.jobTitle">|</text>
								<text>{{item.deptName}}</text>
							</view>
							<view class="Infos_one line1Overflow" style="margin-top: 5rpx;">
								<text>{{ item.hospitalName }}</text>
							</view>
							<view class="Infos_two gray_font line2Overflow">
								<text>擅长：{{ item.areasExpertise }}</text>
							</view>
							<view class="Infos_two gray_font line2Overflow">
								<text>简介：{{ item.briefIntroduction }}</text>
							</view>
						</view>
					</view>
					<view class="btn_small" style="margin-top: 5rpx;" v-if="listData.length>1"
						@click="takeOff(item.doctorId)">取消关注
					</view>
				</view>
			</view>
			<uni-load-more :status="statusLoad" :content-text="contentText" v-if="showLoadMore" />
		</view>
		<view class="noInfo_Img" v-else-if="showNoInfo">
			<image src="../static/images/icon_lack_message@2x.png"></image>
		</view>
		<!-- 确认取消关注 -->
		<uni-popup ref="alertDialog" type="dialog">
			<view class="inputDialog">
				<view class="title"> 确定要取消关注吗？ </view>
				<view class="button-bottom">
					<view class="cancel" @click="dialogClose">取消</view>
					<view @click="dialogConfirm" class="green_words">确定</view>
				</view>
			</view>
		</uni-popup>


	</view>
</template>

<script>
	import {
		doctorList,
	} from '@/api/user.js';

	import {
		updateBind
	} from '@/api/my.js'
	import store from '@/store';

	export default {
		data() {
			return {
				//分页开始
				showLoadMore: false,
				showNoInfo: false,
				statusLoad: 'more',
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中...',
					contentnomore: '没有更多'
				},
				sexStatus: {
					1: "男",
					2: "女"
				},
				typeStatus: {
					1: '图文咨询',
					2: '用药咨询',
					3: '免费咨询',
					4: '购药',
				},
				total: 0, //总条数
				nowCount: 0, //当前累计显示条数
				//分页结束
				listData: [], //列表数据
				payStatus: {
					0: '已支付',
					1: '未支付'
				},
				// 查询参数
				queryParams: {
					pageNum: 1, //第几页
					pageSize: 10 //每页显示条数
				},
				//状态 1进行中，2已取消，3已完成
				status: 1,
				doctorId: '', //取消关注的id
			}
		},
		onLoad() {
			this.showLoadMore = false;
			this.getList();
		},
		onReachBottom() {
			if (this.nowCount > 0 && (this.nowCount >= this.total)) {
				this.statusLoad = "noMore";
			} else {
				this.showLoadMore = true;
				this.statusLoad = "loading";
				this.getList();
			}

		},
		methods: {
			// 取消订单弹窗
			dialogClose() {
				this.$refs.alertDialog.close();
				// this.doctorinfo()
			},
			getNewlist(data) {
				return new Promise((resolve, reject) => {
					doctorList(data)
						.then((res) => {
							resolve(res.data)
						})
						.catch(function(err) {
							uni.hideLoading()
							this.$util.Tips({
								title: err,
							})
						})
				})
			},
			async dialogConfirm() {
				let _this = this;
				let serviceUid = store.state.app.serviceUid;
				updateBind(this.doctorId).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '已取消关注',
							duration: 3000,
						});
						_this.dialogClose(); //关闭弹窗

						_this.queryParams.pageNum = 1;
						_this.listData = [];
						_this.nowCount = 0;

						this.getList() //重新请求列表数据

					}
				}).catch(err => {
					this.$util.Tips({
						title: err,
						icon: 'none'
					})
				})
			},
			// 取消关注
			takeOff(doctorId) {

				this.doctorId = doctorId;
				this.$refs.alertDialog.open();

			},
			goto(url) {
				uni.navigateTo({
					url: url
				})
			},
			getList() {
				let _this = this;
				let newData;
				let listData = _this.listData;
				let nowCount = _this.nowCount;
				let pageNum = _this.queryParams.pageNum;
				uni.showLoading({
					title: '加载中'
				});
				doctorList(_this.queryParams).then(res => {
					let listNew = [];
					newData = listData.concat(res.rows);
					_this.$set(_this, 'listData', newData); //使用$set可以避免this直接赋值，在组件上【有时】不及时生效的问题（偶尔会出现）
					//设置分页
					_this.total = res.total;
					_this.queryParams.pageNum = pageNum + 1;
					_this.nowCount = nowCount + res.rows.length;

					if (pageNum == 1 && res.rows.length <= 0) {
						_this.showNoInfo = true;
					}
					// console.log(store.state.app.serviceUid, this.doctorId, '9999999999----')
					if (this.doctorId && (this.doctorId == store.state.app.serviceUid)) {
						console.log('这俩相等', this.listData)
						setTimeout(() => {
 
							this.$store.commit('SET_SERVICE_UID', this.listData[0]
							.doctorId); //将列表中的第一项医生ID存到缓存中
							this.$store.commit('SET_STOREID', this.listData[0]
								.storeId) //将列表中的第一项医生关联的药店存到缓存中
							this.$store.commit('SET_STORENAME', this.listData[0]
								.storeName) //将列表中的第一项医生关联的药店名存到缓存中
							this.$store.commit('SET_Flag', this.listData[0]
								.expressFlag) //将列表中的第一项医生关联的药店名存到缓存中

						}, 100)
					}
					uni.hideLoading();
				}).catch(res => {
					uni.hideLoading();
				});
			}
		}
	}
</script>
<style scoped>
	.doctorInfo {
		display: flex;
	}

	.bg_color {
		background-color: #FFFFFF;
		margin: 20rpx 30rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding: 16rpx 30rpx;
		min-height: 232rpx;
	}

	.doctor_img image {
		width: 90rpx;
		height: 90rpx;
		width: 100%;
		height: 100%;
		/*border-radius: 100%;*/
	}

	.Infos {
		margin-left: 25rpx;
	}

	.Infos_one {
		font-size: 28rpx;
		width: 90%;
	}

	.Infos_two {
		font-size: 30rpx;
	}

	.bottom_content {
		color: #818181;
		padding-top: 30rpx;
		padding-bottom: 20rpx;
		font-size: 30rpx;
		display: flex;
		justify-content: space-between;
	}

	.btn_small {
		font-size: 27rpx;
		color: #ffffff;
		width: 168rpx;
		text-align: center;
		border-radius: 40rpx;
		background: -webkit-linear-gradient(#77e2a4, #4ccdbc);
		height: 55rpx;
		line-height: 55rpx;
		float: right;
		margin-right: 10rpx;
	}

	/* 弹出框 start*/
	.inputDialog {
		width: 600rpx;
		border-radius: 10rpx;
		background-color: #ffffff;
	}

	.inputDialog>.title {
		text-align: center;
		padding: 60rpx;
		font-size: 32rpx;
		line-height: 50rpx;
	}

	.button-bottom {
		display: flex;
		border-top: 1px solid #f0f0f0;
	}

	.button-bottom view {
		width: 50%;
		padding: 20rpx 0 20rpx 0;
		font-size: 32rpx;
		text-align: center;
	}

	.cancel {
		border-right: 1px solid #f0f0f0;
	}

	/* 绿色字体 */
	.green_words {
		color: #62c0ad;
	}

	/* 弹出框 end*/
</style>